<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            list-style: none;
            display: flex;
            width: 60%;
            text-align: center;
            line-height: 30px;
            /* border: 1px solid #000; */
            margin: auto;
        }
        span {
            border: 1px solid #000;
            width: 25%;
        }
    </style>
</head>
<body>

    <ul>
        <li>
            <!-- <span>序号</span> -->
            <span>姓名</span>
            <span>性别</span>
            <span>年龄</span>
            <span>分数</span>
        </li>
    </ul>
    <ul id="list">
        <!-- <li>
            <span>1</span>
            <span>xx</span>
            <span>xx</span>
            <span>xx</span>
            <span>0</span>
        </li>
        -->
    </ul>

    <script>

        var data = [
            ['陈志豪' , '男' , '30' , '100'] ,
            ['张天乐' , '男' , '20' , '100'] ,
            ['张政哲' , '男' , '26' , '100'] ,
            ['陈志豪' , '男' , '30' , '100'] ,
            ['张天乐' , '男' , '20' , '100'] ,
            ['张政哲' , '男' , '26' , '100'] 
        ] ;

        var res = '' ;

        // 有多少个数据就有多少个li
        data.forEach(function(v) {
            res += '<li>' ;
            // 遍历二维数组
            var arr = v ;
            for(var i = 0 ; i < arr.length ; i++) {
                res += '<span>' + arr[i] + '</span>'
            }
            res += '</li>' ;   
        })

        console.log(res) ;

        var oUl = document.getElementById('list') ;
        oUl.innerHTML = res ;


    </script>
    
</body>
</html>